<template>
    <div style="display: flex; flex-direction: column; z-index: 1000; border: 1px solid #e5f1fb; height: 500px"
         :style="cssStyle">
        <Toolbar style="border-bottom: 1px solid #e5f1fb;"
                 ref="toolBar"
                 :editor="editor"
                 :defaultConfig="toolbarConfig"
                 :mode="mode"
        />
        <Editor
                style="height: 100%; overflow-y: hidden;flex: 1;border-bottom: 1px solid #e5f1fb;"
                v-model="innerValue"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="onCreated"
                @onChange="onChange"
        />
        <!--@onChange="onChange"-->
        <!--@onDestroyed="onDestroyed"-->
        <!--@onMaxLength="onMaxLength"-->
        <!--@customAlert="customAlert"-->
        <!--@customPaste="customPaste"-->
        <!--@onFocus="onFocus"-->
        <!--@onBlur="onBlur"-->
    </div>
</template>

<script>
    import {Editor, Toolbar} from '@wangeditor/editor-for-vue';
    import { DomEditor } from '@wangeditor/editor'
    import {getToken} from "@/utils/auth";
    // import {Message} from 'element-ui'


    export default {
        name: "wangeditor",
        components: {Editor, Toolbar},
        // model: {
        //   prop: "value",
        // },
        emits: ['update:modelValue'],
        props: {
            modelValue: String,
            cssStyle: String,
            toolbarExcludeKeys: {
                type: Array,
                default: () => {
                    return ["fullScreen"]
                }
            }
        },
        watch: {
            modelValue: {
                handler(val) {
                    this.innerValue = val;
                },
                immediate: true
            },
            innerValue(val) {
                this.$emit("update:modelValue", val);
            },
            toolbarExcludeKeys: {
                handler(val) {
                    this.toolbarConfig.excludeKeys = val || []
                },
                immediate: true
            }
        },
        data() {
            return {
                innerValue: "",
                editor: null,
                toolbarConfig: {
                    insertKeys: {
                        index: 24, // 自定义插入的位置
                        keys: ['uploadAttachment'], // “上传附件”菜单
                    },
                    excludeKeys: []
                },
                editorConfig: {
                    placeholder: '请输入内容...',
                    scroll: true,
                    // 在编辑器中，点击选中“附件”节点时，要弹出的菜单
                    hoverbarKeys: {
                        attachment: {
                            menuKeys: ['downloadAttachment'], // “下载附件”菜单
                        },
                    },
                    MENU_CONF: {
                        // “上传附件”菜单的配置
                        uploadAttachment: {
                            server: '', // 服务端地址
                            timeout: 5 * 60 * 1000, // 5s
                            fieldName: 'file',
                            meta: {}, // 请求时附加的数据
                            metaWithUrl: true, // meta 拼接到 url 上
                            headers: {},
                            maxFileSize: 50 * 1024 * 1024, // 10M
                            onBeforeUpload(file) {
                                console.log(file);
                                // for (let key in file) {
                                //   const isLt4M = file[key].size / 1024 / 1024 <= 50;
                                //   if (!isLt4M) {
                                //     Message({
                                //       message: '上传大小不能超过 ' + 50 + 'MB！请重新压缩文件！',
                                //       type: 'error'
                                //     });
                                //     return isLt4M;
                                //   }
                                // }
                                // const isLt4M = file.size / 1024 / 1024 <= 50;

                                return file // 上传 file 文件
                                // return false // 会阻止上传
                            },
                            onProgress(progress) {
                                console.log('onProgress', progress)
                            },
                            onSuccess(file, res) {
                                console.log('onSuccess', file, res)
                            },
                            onFailed(file, res) {
                                // alert(res.message)
                                console.log('onFailed', file, res)
                            },
                            onError(file, err, res) {
                                // alert(err.message)
                                // console.error('onError', file, err, res)
                                const isLt4M = file.size / 1024 / 1024 <= 50;
                                if (!isLt4M) {
                                    this.$message.error('上传大小不能超过 ' + 50 + 'MB！请重新压缩文件！');
                                } else {
                                    this.$message.error('上传出错！');
                                }
                            },

                            // // 上传成功后，用户自定义插入文件
                            // customInsert(res: any, file: File, insertFn: Function) {
                            //   console.log('customInsert', res)
                            //   const { url } = res.data || {}
                            //   if (!url) throw new Error(`url is empty`)

                            //   // 插入附件到编辑器
                            //   insertFn(`customInsert-${file.name}`, url)
                            // },

                            // // 用户自定义上传
                            // customUpload(file: File, insertFn: Function) {
                            //   console.log('customUpload', file)

                            //   return new Promise(resolve => {
                            //     // 插入一个文件，模拟异步
                            //     setTimeout(() => {
                            //       const src = `https://www.w3school.com.cn/i/movie.ogg`
                            //       insertFn(`customUpload-${file.name}`, src)
                            //       resolve('ok')
                            //     }, 500)
                            //   })
                            // },

                            // // 自定义选择
                            // customBrowseAndUpload(insertFn: Function) {
                            //   alert('自定义选择文件，如弹出图床')
                            //   // 自己上传文件
                            //   // 上传之后用 insertFn(fileName, link) 插入到编辑器
                            // },

                            // 插入到编辑器后的回调
                            onInsertedAttachment(elem) {
                                console.log('inserted attachment', elem)
                            },
                        },
                    },
                },
                mode: 'default', // or 'simple'
            }
        },
        created() {

        },
        methods: {
            onCreated(editor) {
                this.editor = Object.seal(editor);
                // 图片配置
                const uploadImageConfig = this.editor.getMenuConfig("uploadImage");
                Object.assign(uploadImageConfig, {
                    server: '/api/blade-resource/file/upload',
                    // 自定义增加 http  header
                    headers: {
                        "Blade-Auth": getToken()
                    },
                    fieldName: "file",
                    meta: {
                        isPublic: false,
                    },
                    customInsert(res, insertFn) {
                        const data = res.data;
                        if (res.success) {
                            // res 即服务端的返回结果
                            // 从 res 中找到 url alt href ，然后插入图片
                            insertFn(data.url, data.name, data.url)
                        }
                    },
                });
                // 视频
                const uploadVideoConfig = this.editor.getMenuConfig("uploadVideo");
                Object.assign(uploadVideoConfig, {
                    server: '/api/blade-resource/file/upload',
                    // 自定义增加 http  header
                    headers: {
                        "Blade-Auth": 'bearer ' + getToken()
                    },
                    fieldName: "file",
                    meta: {
                        isPublic: false,
                    },
                    customInsert(res, insertFn) {
                        const data = res.data;
                        if (res.success) {
                            // res 即服务端的返回结果
                            // 从 res 中找到 url alt href ，然后插入图片
                            insertFn(data.url, data.name, data.url)
                        }
                    },
                });
                // 附件
                const uploadAttachmentConfig = this.editor.getMenuConfig("uploadAttachment");
                Object.assign(uploadAttachmentConfig, {
                    server: '/api/blade-resource/file/upload',
                    // 自定义增加 http  header
                    headers: {
                        "Blade-Auth": 'bearer ' + getToken()
                    },
                    fieldName: "file",
                    meta: {
                        isPublic: false,
                    },
                    customInsert(res, file, insertFn) {
                        const data = res.data;
                        if (res.success) {
                            // res 即服务端的返回结果
                            // 从 res 中找到 url alt href ，然后插入图片
                            insertFn(`customInsert-${file.name}`, data.url)
                        }
                    },
                })
            },
            onChange(editor) {
                // console.log('onChange', editor.getHtml())
                // this.value=editor.getHtml()
                this.$emit("update:modelValue", editor.getHtml());
            },
            onDestroyed(editor) {
                console.log('onDestroyed', editor)
            },
            onMaxLength(editor) {
                console.log('onMaxLength', editor)
            },
            // onFocus(editor) {
            //   console.log('onFocus', editor)
            // },
            // onBlur(editor) {
            //   console.log('onBlur', editor)
            // },
            customAlert(info, type) {
                console.log(`customAlert in Vue demo\n${type}:\n${info}`)
            },
            customPaste(editor, event, callback) {
                console.log('ClipboardEvent 粘贴事件对象', event)
                // const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
                // const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
                // const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）

                // 自定义插入内容
                // editor.insertText('xxx')

                // 返回 false ，阻止默认粘贴行为
                // event.preventDefault()
                // callback(false) // 返回值（注意，vue 事件的返回值，不能用 return）

                // 返回 true ，继续默认的粘贴行为
                callback(true)
            },
        },
        mounted() {

        },
        beforeDestroy() {
            const editor = this.editor;
            console.log("beforeDestroy");
            if (editor == null) return;
            editor.destroy() // 组件销毁时，及时销毁编辑器
        }
    }
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped>
    :deep(.w-e-full-screen-container) {
        z-index: 1000;
    }

    :deep(.w-e-modal) {
        padding: 20px 15px 0 !important;
    }

    :deep(.title) {
        margin-bottom: 0px;
    }
</style>
